<template>
  <div>
    <el-table
      :data="addressList"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="personName"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="personPhone"
        label="联系方式"
        width="120">
      </el-table-column>
      <el-table-column
        prop="provinceName"
        label="省份"
        width="120">
      </el-table-column>
      <el-table-column
        prop="cityName"
        label="市区"
        width="120">
      </el-table-column>
      <el-table-column
        prop="countyName"
        label="县/区"
        width="300">
      </el-table-column>
      <el-table-column
        prop="street"
        label="街道"
        width="120">
      </el-table-column>
      <el-table-column
        prop="addressInfo"
        label="具体地址"
        width="120">
      </el-table-column>
      <el-table-column
        label="操作"
        width="160">
        <template slot-scope="scope">
          <el-button @click="editAddressList(scope.row)" type="success" size="small">编辑</el-button>
          <el-button type="danger" @click="delAddress(scope.row)" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-drawer
        title="请编辑地址信息"
        :visible.sync="drawer"
        :direction="direction"
      >
        <div style="margin-top: 25px">
          <span style="font-size: larger">请选择省: </span>
          <el-select v-model="provinceId" placeholder="请选择省份" @change="City(provinceId)">
            <el-option
              v-for="item in ProvinceList"
              :key="item.provinceId"
              :label="item.provinceName"
              :value="item.provinceId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 25px">
          <span style="font-size: larger">请选择市: </span>
          <el-select v-model="cityId" placeholder="请选择市" @change="County(cityId)" >
            <el-option
              v-for="item in CityList"
              :key="item.cityId"
              :label="item.cityName"
              :value="item.cityId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 25px">
          <span style="font-size: larger">请选择县: </span>
          <el-select v-model="countyId" placeholder="请选择县" >
            <el-option
              v-for="item in CountyList"
              :key="item.countyId"
              :label="item.countyName"
              :value="item.countyId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 25px"><el-input v-model="editAdd.personName" placeholder="请输入姓名"></el-input></div>
        <div style="margin-top: 25px"><el-input v-model="editAdd.personPhone" placeholder="请输入联系方式"></el-input></div>
        <div style="margin-top: 25px"><el-input v-model="editAdd.street" placeholder="请输入街道"></el-input></div>
        <div style="margin-top: 25px"><el-input v-model="editAdd.addressInfo" placeholder="请输入详细地址"></el-input></div>
        <div style="margin-top: 25px;text-align: center">
          <el-button @click="sureEdit">确认修改</el-button>
        </div>
      </el-drawer>
    </div>
    <div>
      <el-button type="text" @click="add">新增地址</el-button>
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <div style="margin-top: 25px">
          <span style="font-size: larger">请选择省: </span>
          <el-select v-model="newAddressList.provinceId" placeholder="请选择省份" @change="City(newAddressList.provinceId)">
            <el-option
              v-for="item in ProvinceList"
              :key="item.provinceId"
              :label="item.provinceName"
              :value="item.provinceId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 25px">
          <span style="font-size: larger">请选择市: </span>
          <el-select v-model="newAddressList.cityId" placeholder="请选择市" @change="County(newAddressList.cityId)" >
            <el-option
              v-for="item in CityList"
              :key="item.cityId"
              :label="item.cityName"
              :value="item.cityId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 25px">
          <span style="font-size: larger">请选择县: </span>
          <el-select v-model="newAddressList.countyId" placeholder="请选择县" >
            <el-option
              v-for="item in CountyList"
              :key="item.countyId"
              :label="item.countyName"
              :value="item.countyId">
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 25px"><el-input v-model="newAddressList.personName" placeholder="请输入姓名"></el-input></div>
        <div style="margin-top: 25px"><el-input v-model="newAddressList.personPhone" placeholder="请输入联系方式"></el-input></div>
        <div style="margin-top: 25px"><el-input v-model="newAddressList.street" placeholder="请输入街道"></el-input></div>
        <div style="margin-top: 25px"><el-input v-model="newAddressList.addressInfo" placeholder="请输入详细地址"></el-input></div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sureAdd">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dizhi',
  data () {
    return {
      addressList: [],
      drawer: false,
      direction: 'rtl', // 弹窗
      editAdd: [],
      ProvinceList: [], // 省份
      CityList: [], // 市
      CountyList: [], // 县
      provinceId: '',
      cityId: '',
      countyId: '',
      dialogVisible: false,
      newAddressList: {
        dealerId: '',
        provinceId: '',
        cityId: '',
        countyId: '',
        street: '',
        addressInfo: '',
        personName: '',
        personPhone: ''
      }
    }
  },
  created () {
    this.$axios.post('address/queryAddress', {
      page: '1', limit: '99', dealerId: this.myDealerId()
    })
      .then((res) => {
        window.console.log('res')
        window.console.log(res)
        this.addressList = res.data.data
      })
  },
  methods: {
    myDealerId () {
      console.log('this.$store.getters.getCompany.dealerId')
      console.log(this.$store.getters.getCompany.dealerId)
      return this.$store.getters.getCompany.dealerId
    },
    editAddressList (row) {
      this.editAdd = row
      this.drawer = true
      // window.console.log(this.editAdd)
      this.$axios.post('address/queryProvince', {})
        .then((res) => {
          this.ProvinceList = res.data.data
        }
        )
    },
    delAddress (row) {
      let addressId = row.addressId
      window.console.log(addressId)
      this.$axios.post('address/delAddress', { addressId: addressId })
        .then((res) => {
          if (res.data.code === 200) {
            alert(res.data.msg)
            // this.addressList= res.data.data
            this.$axios.post('address/queryAddress', {
              page: '1', limit: '99', dealerId: '1'
            })
              .then((res) => {
                window.console.log(res)
                this.addressList = res.data.data
              })
          }
        })
    },
    City (id) {
      this.$axios.post('/address/queryCity', { provinceId: id })
        .then((res) => {
          // window.console.log(res)
          this.CityList = res.data.data
        })
    },
    County (id) {
      this.$axios.post('address/queryCounty', { cityId: id })
        .then((res) => {
          window.console.log(res)
          this.CountyList = res.data.data
        })
    },
    sureEdit () {
      window.console.log(this.editAdd)
      this.$axios.post('address/editAddress',
        {
          dealerId: this.myDealerId(),
          addressId: this.editAdd.addressId,
          provinceId: this.provinceId,
          cityId: this.cityId,
          countyId: this.countyId,
          street: this.editAdd.street,
          addressInfo: this.editAdd.addressInfo,
          personName: this.editAdd.personName,
          personPhone: this.editAdd.personPhone
        }).then((res) => {
        if (res.data.code === 200) {
          alert('编辑成功')
          this.$axios.post('address/queryAddress', {
            page: '1', limit: '99', dealerId: this.myDealerId()
          })
            .then((res) => {
              window.console.log(res)
              this.addressList = res.data.data
            })
        }
      })
    },
    sureAdd () {
      this.dialogVisible = false
      this.$axios.post('address/addAddress', {
        dealerId: this.myDealerId(),
        provinceId: this.newAddressList.provinceId,
        cityId: this.newAddressList.cityId,
        countyId: this.newAddressList.countyId,
        street: this.newAddressList.street,
        addressInfo: this.newAddressList.addressInfo,
        personName: this.newAddressList.personName,
        personPhone: this.newAddressList.personPhone
      }).then((res) => {
        if (res.data.code === 200) {
          alert('添加成功')
          this.$axios.post('address/queryAddress', {
            page: '1', limit: '99', dealerId: this.myDealerId()
          })
            .then((res) => {
              window.console.log(res)
              this.addressList = res.data.data
            })
        }
      })
    },
    add () {
      this.dialogVisible = true
      this.$axios.post('address/queryProvince', {})
        .then((res) => {
          this.ProvinceList = res.data.data
        }
        )
    }
  }
}
</script>

<style scoped>

</style>
